<template>
  <div class="playMusic-wrap">
    <div class="playMusic-header">
      <div class="playMusic-header-logo">QQ音乐</div>
      <div class="playMusic-header-login">
      <a href="#">登录</a> <a href="#">设置</a></div>
    </div>
    <div class="playMusic-main">
      <div class="music-main-left">
        <div class="music-main-btns">
          <a href="#">收藏</a>
          <a href="#">添加到</a>
          <a href="#">下载</a>
          <a href="#">删除</a>
          <a href="#">清空列表</a>
        </div>
        <table class="music-main-list">
          <th>
            <td>歌曲</td>
            <td>歌手</td>
            <td>时长</td>
          </th>
          <tbody>
          <tr> <td>最伟大的作品</td> <td>周杰伦</td> <td>04:40</td></tr>
          <tr> <td>最伟大的作品</td> <td>周杰伦</td> <td>04:40</td></tr>
          <tr> <td>最伟大的作品</td> <td>周杰伦</td> <td>04:40</td></tr>     
          </tbody>
        </table>
      </div>
      <div class="music-main-right">
        <div class="main-music-img">
          <img src="./img/ooo.png" alt="">
        </div>
        <div class="main-music-tit">
          
        </div>
        <div class="main-music-words">
          
        </div>
      </div>
    </div>
    <div class="playMusic-footer">
      <div class="playerbtn-prev">
        <svg t="1665987902520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2175" data-spm-anchor-id="a313x.7781069.0.i0" width="30" height="30"><path d="M206 865h-38c-30.928 0-56-25.072-56-56V216c0-30.928 25.072-56 56-56h38c30.928 0 56 25.072 56 56v593c0 30.928-25.072 56-56 56z m168.686-386.191l422.304-303.4c32.294-23.201 77.282-15.83 100.484 16.464A72 72 0 0 1 911 233.883v559.053c0 39.764-32.235 72-72 72a72 72 0 0 1-39.95-12.1L376.288 570.877c-25.73-17.16-32.677-51.93-15.517-77.66a56 56 0 0 1 13.915-14.408z" p-id="2176" fill="#e6e6e6"></path></svg>
      </div>
      <div class="playerbtn-play">
        <svg t="1665988147725" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6605" width="30" height="30"><path d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z" fill="#e6e6e6" p-id="6606"></path></svg>
        <!-- <svg t="1665988099164" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5628" width="20" height="20"><path d="M426.666667 138.666667v746.666666a53.393333 53.393333 0 0 1-53.333334 53.333334H266.666667a53.393333 53.393333 0 0 1-53.333334-53.333334V138.666667a53.393333 53.393333 0 0 1 53.333334-53.333334h106.666666a53.393333 53.393333 0 0 1 53.333334 53.333334z m330.666666-53.333334H650.666667a53.393333 53.393333 0 0 0-53.333334 53.333334v746.666666a53.393333 53.393333 0 0 0 53.333334 53.333334h106.666666a53.393333 53.393333 0 0 0 53.333334-53.333334V138.666667a53.393333 53.393333 0 0 0-53.333334-53.333334z" fill="#e6e6e6" p-id="5629"></path></svg> -->
      </div>
      <div class="playerbtn-next">
        <svg t="1665987998300" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4653" width="30" height="30"><path d="M817 160h38c30.928 0 56 25.072 56 56v593c0 30.928-25.072 56-56 56h-38c-30.928 0-56-25.072-56-56V216c0-30.928 25.072-56 56-56zM648.314 546.191l-422.304 303.4c-32.294 23.201-77.282 15.83-100.484-16.464A72 72 0 0 1 112 791.117V232.064c0-39.764 32.235-72 72-72a72 72 0 0 1 39.95 12.1l422.762 281.959c25.73 17.16 32.677 51.93 15.517 77.66a56 56 0 0 1-13.915 14.408z" p-id="4654" fill="#e6e6e6"></path></svg></div>
      <div class="player-music">
        <div class="player-music-tit">
          <div>连借口都没有</div>
          <div>00:28 / 04:17 </div>
        </div>
        <div class="player-progress">
          <div class="player-progress-load">
         
          </div>
          <div class="player-progress-play">
            <i class="player-progress-dot"></i>
          </div>
        </div>
      </div>
      <div class="player-comment"></div>
      <div class="player-volumn"></div>

    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "PlayMusic",
};
</script>

<script lang="ts" setup>
import { getSongInfoApi } from "@/api/rank";
import { onMounted, ref } from "vue";

import { useRoute, useRouter } from "vue-router";
const router = useRouter()
const route = useRoute()
// 获取歌曲信息

const getSongInfo = async ()=>{
  const id = route.query.songId
  console.log(id,'id');
  
  // const res = await getSongInfoApi(id)
}
onMounted(()=>{
  getSongInfo()
})

// 页面宽度
const bodyWidth = ref(0);
onMounted(() => {
  bodyWidth.value = document.body.clientWidth;
  window.onresize = () => {
    return () => {
      bodyWidth.value = document.body.clientWidth;
    };
  };
});
</script>

<style scoped>
.playMusic-wrap {
  width: v-bind(bodyWidth + "px");
  min-width: 1200px;
  background-color: aqua;
  position: absolute;
  left: 0;
  margin: 0 auto;
}
.playMusic-header{
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 20px   50px 0 50px;
  box-sizing: border-box;
  opacity: .3;
}
.playMusic-header-logo{
  width: 78px;
  height: 21px;
  font-size: 20px;
}
.playMusic-header-login a{
  text-decoration: none;
  font-size: 14px;
  display: inline-block;
  cursor: pointer;
  width: 28px;
  height: 30px;
  padding: 0 5px;
}
.playMusic-header-login a:hover{
  color:#fff !important;
}
.playMusic-main{
  display: flex;
  justify-content: space-between;
}
.music-main-left{
  flex-grow: 0.6;
 min-width: 500px;
 margin-left: 100px;
 border: 1px solid black;
}
.music-main-right{
  min-width: 300px;
}
.music-main-right img{
  width: 200px;
  height: 200px;
}

.music-main-btns {
 display: flex;
}
.music-main-btns a{
  display:inline-block;
  width: 100px;
  height: 30px;
  line-height: 30px;
  text-decoration: none;
  text-align: center;
  vertical-align: center;
}
.music-main-list{
  min-height: 350px;
  /* height: 500px; */
}
.playMusic-footer{
  display: flex;
  padding: 50px 100px;
}
.playMusic-footer>div{
  /* padding-right:  40px; */
  margin-right: 40px;
}
.player-music{
  flex-grow: 0.6;
  border: 1px solid black;
  color: #aeb8af;

}
.player-music-tit{
  display: flex;
  justify-content: space-between;
}
.player-progress{
  position: relative;
  margin: 10px 0;
  height: 2px;
  background-color: #395c3f;
  cursor: pointer;
}

.player-progress-play{
  position: relative;
  height: 2px;
  background-color: #fff;
  width: 30%;
  z-index: 9999;
}
.player-progress-dot{
  cursor: pointer;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -5px;
}

</style>
